段落

在 Markdown 中以空行分割为段落，段落中的换行符会被忽略，所以如果要在段落内强制换行，得在末尾添加 2 个空格

段落 1

段落 2
被忽略的换行  
在行末添加 2 个空格强制换行

段落 1

段落 2 被忽略的换行
在行末添加 2 个空格强制换行

行内样式

行内代码 <code>
增加的内容 <ins>
删除的内容 <s>
高亮的内容 <mark>
按键 <kbd>

`行内代码`
++增加的内容++
~~删除的内容~~
==高亮的内容==  
<kbd>按键</kbd>

代码

```typescript
let a = 123
```

```diff
- System.Console.WriteLine("Hello, World!");
+ System.Console.WriteLine("Rock all night long!");
```

```bash
npm run build --dev && npm run up
```

```vue {data-line=1,2}
<template>
    <div class="link-block">高亮行号</div>
</template>
```

let a = 123

- System.Console.WriteLine("Hello, World!");
+ System.Console.WriteLine("Rock all night long!");

npm run build --dev && npm run up

<template>
    <div class="link-block">高亮行号</div>
</template>

iframe 嵌入

Bilibil 视频嵌入

在 src="...&bvid= 后填入 Bilibli 视频的 BV（地址里的BV开头）

<iframe
    height="400"
    width="600"
    high_quality="1"
    src="//player.bilibili.com/player.html?as_wide=1&high_quality=1&danmaku=0&bvid=BV1kb4y1m7e7"
    allowfullscreen
></iframe>

Figma 嵌入

在 src="...&url= 后填入 Figma 文件的地址，注意要文件的权限要所有人可见，详细信息

<iframe
    allowfullscreen
    height="400"
    width="600"
    src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/3wdLeSnzTYqEtQ2muE8Bhp"
></iframe>

自定义块

::: warn 警告标题
请不要使用时间 warn
:::

::: warn
111 请不要使用时间 [vercel.com](https://vercel.com/docs/rest-api)
:::

::: tip
请不要使用时间 tip
:::

::: tip 安装说明
在 Windows 下按 <kbd>Ctrl + D</kbd> [vercel.com](https://vercel.com/docs/rest-api)
:::

::: info
请不要使用时间 info
:::

::: info 安装说明
在 Windows 下按 <kbd>Ctrl + D</kbd> [vercel.com](https://vercel.com/docs/rest-api)
:::

实例

代码

Svelte 的未来是边缘优先。通过将传统应用程序的最佳部分与单页应用程序的最佳部分相结合，我们可以构建“过渡应用程序”，提供令人愉悦的最终用户体验和出色的开发人员体验。 Vercel 是一个开放平台，致力于开发和支持使用起来令人愉悦的工具，并使开发人员能够为最终用户打造令人难以置信的体验。通过赞助 Svelte、Nuxt、Astro 等框架以及我们相信和使用的社区构建的库，我们正在帮助创建一个更好的 Web 生态系统。 运行 npm run dev 士大夫 我们对 Svelte 的未来感到兴奋，这是 2020 年写下的文字 并为开放生态系统中的其他框架创建模板以供效仿。了解为什么开发人员喜欢 Svelte 并立即在 Vercel 上试用 Svelte。我们期待与您共建 Svelte 的未来 Ctrl+C。

<template>
    <div class="link-block">LinkBlock</div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

let a = 123

let a = 123

- System.Console.WriteLine("Hello, World!");
+ System.Console.WriteLine("Rock all night long!");

import {
    ArrayMaxSize,
    IsArray,
    IsBoolean,
    IsNumber,
    IsOptional,
    IsString,
    IsUUID,
    MaxLength,
    ValidateNested,
} from "class-validator"
import { Type } from "class-transformer"

export class DtoBlockSet {
    @IsArray()
    @ArrayMaxSize(1024)
    @Type(() => DtoBlock)
    @ValidateNested({ each: true })
    blocks!: DtoBlock[]

    @IsUUID()
    parentId!: string
}

Advertisement :)

• pica - high quality and fast image resize in browser.
• babelfish - developer friendly i18n with plurals support and easy syntax.

You will like those projects!

import * as Avatar from "@radix-ui/react-avatar"
import * as Tooltip from "@radix-ui/react-tooltip"

export default () => (
    <Tooltip.Root>
        <Tooltip.Trigger>
            <Avatar.Root>…</Avatar.Root>
        </Tooltip.Trigger>

        <Tooltip.Content side="top">
            Tooltip content
            <Tooltip.Arrow />
        </Tooltip.Content>
    </Tooltip.Root>
)

h1 Heading 8-)

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h2 Heading

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h3 Heading

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h3 一个很长的当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h3 2341234

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h4 Heading

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h5 Heading

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

h6 Heading

当近代西文的金属活字印刷术应用到中文的活字排版时，我们就已经有与此对应的称呼——「全身/半身」。这里的「身」即「字身」（body），在当年铅字印刷的全盛期，印刷行业人士都这么说，而不会用「全角/半角」这样一个外来词。

Horizontal Rules

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

inline-code

Blockquotes

Blockquotes can also be nested...

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers...

5. ...or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code "fences"

Sample text here...

Syntax highlighting

var foo = function (bar) {
    return bar++
}

console.log(foo(5))

Tables

Right aligned columns

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location:

Plugins

The killer feature of markdown-it is very effective support of syntax plugins.

Emojies

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

Subscript / Superscript

• 19^th^
• H~2~O

<ins>

Inserted text

<mark>

Marked text

Footnotes

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote can have markup

and multiple paragraphs.

[^second]: Footnote text.

Definition lists

Term 1

: Definition 1 with lazy continuation.

Term 2 with inline markup

: Definition 2

    { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

Custom containers